<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" back-text="返回"
		 title="项目列表">
			<view class="navbar-right" slot="right" @click="addProject()">添加</view>
		</u-navbar>
		<view class="content">
			<u-row gutter="16">
				<u-col span="6" v-for="(item,index) in dataList" :key="index" @tap="openProject(item)" @touchstart.prevent="touchstart(index)"
				 @touchend.prevent="touchend">
					<view class="item">
						<view class="image-box">
							<!-- <u-lazy-load class="lazy-img" height="160px" loading-img="../../../static/LOGO.png" :image="item.logo" v-if="item.logo" img-mode="scaleToFill"></u-lazy-load> -->
							<!-- <u-lazy-load class="lazy-img" height="160px" loading-img="../../../static/LOGO.png" image="../../../static/LOGO.png" v-else></u-lazy-load> -->
							<image :src="item.logo" mode="scaleToFill" lazy-load="true" v-if="item.logo"></image>
							<image src="../../../static/LOGO.png" mode="scaleToFill" lazy-load="true" v-else></image>
						</view>
						<view class="content-bg">
							<view class="item-title">{{item.name}}</view>
							<view class="item-principal">负责人：{{item.contact}}</view>
							<view class="item-phone">电话：{{item.contactPhone}}</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<kModel ref="kModel" />
		<view v-show="isLoadMore">
			<uni-load-more :status="loadStatus" :contentText="text"></uni-load-more>
		</view>
	</view>
</template>

<script>
	// 导入加载组件
	// 导入请求接口
	import {
		readProjectList
	} from '@/api/project.js'
	export default {
		data() {
			return {
				barbg: {
					background: '#5c92ff'
				},
				backText: {
					color: '#FFFFFF'
				},
				loadStatus: 'loading',
				isOnshow: true,
				isLoadMore: false,
				projectQueryInfo: {
					// action: 'project',
					page: 1,
					count: 8
				},
				Loop: null,
				dataList: [],
				text: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},

			}
		},
		
		// 下拉刷新函数
		// onPullDownRefresh() {
		// 	// console.log
		// 	this.getProjectList(1)
		// },
		//上拉刷新函数
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.projectQueryInfo.page += 1
				this.getProjectList(0)
			}
		},

		mounted() {
			this.isloading(true)
		},
		onShow() {
			var pages = getCurrentPages();
			this.prevPage = pages[pages.length - 1];
			if (this.prevPage.brand === true) {
				this.getProjectList()
			}
			if (this.prevPage.delete === true) {
				this.getProjectList()
			}
			// console.log(brand)
			if (this.isOnshow === true) {
				this.getProjectList()
			}
			// this.getProjectList(0)
		},
		methods: {
			isloading(status){
				if(status){
					this.$refs.kModel.showModel({
						type: 'loading',
						title: '获取数据中',
						style: 'circle',
					})
				} else {
					this.$refs.kModel.closeModel()
				}
			},
			getProjectList(type) {
				readProjectList(this.projectQueryInfo).then(res => {
					console.log(res)
					this.isloading(false)
					if (res.code === 1) {
						if (res.result.data) {
							if (this.prevPage.brand === true) {
								// this.dataList = this.dataList.unshift(res.result.data.slice(res.result.data.length - 1))
								this.dataList.splice(0, 0, res.result.data.slice(res.result.data.length - 1)[0])
								this.prevPage.brand = false
							} else {
								this.dataList = this.dataList.concat(res.result.data)
							}
							if (res.result.data.length < this.projectQueryInfo.count) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
						if (this.page > 1) {
							this.page -= 1
						}
					}
				}).catch(() => {
					uni.showToast({
						title: '服务器开小差了呢，请您稍后再试',
						icon: 'none'
					})
					this.isLoadMore = false
					if (this.page > 1) {
						this.page -= 1
					}
				})
				if (this.isOnshow === true) {
					this.isOnshow = false
				}

			},
			addProject() {
				uni.navigateTo({
					url: "addProject/index"
				})
			},
			openProject(item) {
				this.$urlTo.togo("/pages/project/index", {
					id: item.id,
					name: item.name
				})
				// uni.navigateTo({
				// 	url: "../../project/index?id=" + id
				// })
			},
			touchstart(index) {
				let that = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: "删除",
						content: '请问要删除本条消息吗？',
						success: async function(res) {
							if (res.confirm) {

							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					});
				}.bind(this), 1000);
			},
			touchend() {
				clearInterval(this.Loop);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.content {
		padding: 20rpx;

		.item {
			background-color: #ffffff;
			margin-bottom: 16rpx;
			border-radius: 10rpx;
			padding: 20rpx;

			.image-box {
				height: 192rpx;
				background-color: #dfdfdf;

				image {
					width: 100%;
					height: 100%;
				}
			}
			.content-bg{
				
			}

			.item-title {
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				line-height: 60rpx;
				letter-spacing: 1px;
				color: #2c3240;
				font-weight: bold;
			}

			.item-principal {
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 1px;
				color: #2c3240;
				font-weight: bold;
				line-height: 50rpx;
			}

			.item-phone {
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 1px;
				color: #2c3240;
				font-weight: bold;
			}
		}
	}
</style>
